import React from 'react';
import { Paper, Typography, Snackbar, Alert, Container, Box } from '@mui/material';

// 布局组件 props 类型
export interface SerialPortLayoutProps {
  snackbarOpen: boolean;
  snackbarMessage: string;
  onSnackbarClose: () => void;
  left: React.ReactNode;
  right: React.ReactNode;
}

const SerialPortLayout: React.FC<SerialPortLayoutProps> = ({ left, right, snackbarOpen, snackbarMessage, onSnackbarClose }) => (
  <Container maxWidth="lg" sx={{ mt: 4, mb: 4, maxWidth: { xs: '100%', md: '100%', lg: '100%' } }}>
    <Paper elevation={3} sx={{ p: 3, aspectRatio: '4/3', minWidth: 800, minHeight: 600, maxWidth: '1200px', mx: 'auto', overflow: 'hidden' }}>
      <Typography variant="h4" component="h2" gutterBottom>
        串口通信
      </Typography>
      <Box sx={{ 
          display: 'grid', 
          gridTemplateColumns: { xs: '1fr', md: '3fr 9fr', lg: '3fr 9fr' }, 
          gap: 2, 
          alignItems: 'stretch', 
          height: 'calc(100% - 60px)', // 减去标题和间距的高度
          overflow: 'hidden'
        }}>
          {/* 左侧配置区 - 占比3:7 */}
          <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
            <Paper elevation={2} sx={{ p: 2, bgcolor: '#f5f5f5', borderRadius: 1, flex: 1, minHeight: 600 }}>
              {left}
            </Paper>
          </Box>
          {/* 右侧收发消息区 - 占比3:7 */}
          <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
            <Paper elevation={2} sx={{ p: 2, bgcolor: '#f9fafc', borderRadius: 1, flex: 1, minHeight: 600, display: 'flex', flexDirection: 'column' }}>
              {right}
            </Paper>
          </Box>
        </Box>
      <Snackbar
        open={snackbarOpen}
        autoHideDuration={3000}
        onClose={onSnackbarClose}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      >
        <Alert
          onClose={onSnackbarClose}
          severity="info"
          sx={{ width: '100%' }}
        >
          {snackbarMessage}
        </Alert>
      </Snackbar>
    </Paper>
  </Container>
);

export default SerialPortLayout;
